
/**
 * @desc 客户管理，新增/修改弹框
 * @author yd_zhaorongjun
 */
<template>
  <div>
    <el-dialog
      :title="title"
      class="gl_dialog_TitleLine"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="880px"
    >
      <el-scrollbar v-loading="loading" wrap-class="scrollbar-wrapper gl_dialog_height">
        <el-form ref="SaasTenantCreateDto" class="gl_form_mini" :model="SaasTenantCreateDto" :rules="SaasTenantCreateDto_Rules" label-position="right" label-width="140px" style="padding-right: 30px;">
          <el-row :gutter="20">
            <el-col :span="12">
              <!-- 客户名称 -->
              <el-form-item :label="$t('tenant.customerName')" prop="name">
                <el-input v-model="SaasTenantCreateDto.name" :placeholder="$t('tenant.placeholder_ustomerName')" type="text" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- 版本类型 -->
              <el-form-item :label="$t('tenant.editionName')" prop="editionId">
                <el-select v-model="SaasTenantCreateDto.editionId" :placeholder="$t('tenant.placeholder_editionName')" style="width:100%" size="mini">
                  <el-option v-for="item in editions" :key="item.id" :label="item.displayName" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <!-- 联系人 -->
              <el-form-item :label="$t('tenant.contacts')" prop="contactPerson">
                <el-input v-model="SaasTenantCreateDto.contactPerson" :placeholder="$t('tenant.placeholder_contacts')" type="text" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- 机构类型 -->
              <el-form-item :label="$t('tenant.organizationType')" prop="adminOrganizationUnitTypeCode">
                <el-select v-model="SaasTenantCreateDto.adminOrganizationUnitTypeCode" :placeholder="$t('tenant.placeholder_organizationType')" style="width:100%" size="mini">
                  <el-option v-for="item in organizationUnitsTypes" :key="item.code" :label="item.name" :value="item.code" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <!-- 联系人手机 -->
              <el-form-item :label="$t('tenant.contactsPhone')" prop="contactPhone">
                <el-input v-model="SaasTenantCreateDto.contactPhone" :placeholder="$t('tenant.placeholder_contactsPhone')" type="text" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- 公司所在地 -->
              <el-form-item :label="$t('tenant.companyAddress')" prop="addressData">
                <el-cascader ref="cascader" :key="cascaderKey" v-model="SaasTenantCreateDto.addressData" :options="district" :props="{ value: 'code', label: 'name' }" :placeholder="$t('tenant.pleaseSelect')" size="mini" style="width: 100%;" @change="changeAddressData" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <!-- 使用结束时间提醒 -->
              <el-form-item :label="$t('tenant.reminderTime')">
                <el-date-picker
                  v-model="SaasTenantCreateDto.remindTime"
                  type="datetime"
                  :placeholder="$t('tenant.placeholder_reminderTime')"
                  style="width: 100%;"
                  size="mini"
                />
              </el-form-item>
              <!-- <el-form-item :label="$t('tenant.reminderTime')">
                <el-date-picker
                  v-model="SaasTenantCreateDto.remindTime"
                  type="datetime"
                  :placeholder="$t('tenant.placeholder_reminderTime')"
                  style="width: 100%;"
                  size="mini"
                  :picker-options="remindTimeOption" // 控制不可选
                />
              </el-form-item> -->
            </el-col>
          </el-row>
          <!-- 是否参与团体会员审核 -->
          <!-- <el-row :gutter="20">
            <el-form-item>
              <el-checkbox v-model="SaasTenantCreateDto.ischeck" style="margin-left:10px;">是否参与团体会员审核</el-checkbox>
            </el-form-item>
          </el-row> -->
          <el-row :gutter="20">
            <el-col :span="24">
              <!-- 描述 -->
              <el-form-item :label="$t('tenant.description')">
                <el-input
                  v-model="SaasTenantCreateDto.description"
                  type="textarea"
                  show-word-limit
                  maxlength="200"
                  :rows="4"
                  :placeholder="$t('tenant.placeholder_description')"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-scrollbar>

      <span slot="footer" class="dialog-footer">
        <!-- 取消按钮 -->
        <el-button size="mini" @click="dialogVisible = false">{{ $t('button.cancel') }}</el-button>
        <!-- 保存按钮 -->
        <el-button v-if="type == 'new'" type="primary" :loading="submitLoading" size="mini" @click="saveNew()">{{ $t('button.save') }}</el-button>
        <!-- 保存按钮 -->
        <el-button v-else type="primary" :loading="submitLoading" size="mini" @click="saveEdit()">{{ $t('button.save') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { CustomerVO } from '@/lib/form/tenantManagement.js';
// import { SaasTenantCreateDto_Rules } from '@/lib/validate/tenantManagement/index.js';
import validator from '@/lib/validate/index.js';
import { translateByCode } from '@/lib/getTransData';
import { SaasTenantCreateDto } from '@/lib/form/swaggerForm';
import { api_GET_OrganizationUnitsTypes } from '@/extend/api/swaggerApi/identity';// 获取组织架构列表
import { api_GET_TenantsId } from '@/extend/api/swaggerApi/saas';
import { CopyData, FormatDate } from '@/lib';

export default {
  name: 'CustomerModal',
  props: {
    district: {
      type: Array,
      default() {
        return [];
      }
    },
    editions: {
      type: Array,
      default() {
        return [];
      }
    },
    delegationType: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      SaasTenantCreateDto: new SaasTenantCreateDto(),
      SaasTenantCreateDto_Rules: { // 必填项，验证密码格式
        // 客户名称
        name: [
          // 客户名称不能为空
          validator.required(translateByCode('rules.customerName'))
        ],
        // 版本类型
        editionId: [
          {
            required: true,
            message: translateByCode('rules.editionName'), // 版本类型不能为空
            trigger: 'change'
          }
        ],
        // 机构类型
        adminOrganizationUnitTypeCode: [
          {
            required: true,
            message: translateByCode('rules.organizationType'), // 机构类型不能为空
            trigger: 'change'
          }
        ],
        // 联系人
        contactPerson: [
          // 联系人不能为空
          validator.required(translateByCode('rules.contacts'))
        ],
        // 联系人手机
        contactPhone: [
          // 联系人手机不能为空
          validator.required(translateByCode('rules.contactsPhone')),
          {
            validator(rule, value, callback) {
              callback(validator.checkPhone(value, translateByCode('rules.validTelephone')));
            },
            trigger: 'blur'
          }
        ],
        // 地址
        addressData: [
          // 地址不能为空
          {
            type: 'array',
            required: true,
            validator(rule, value, callback) {
              callback(validator.checkArray(value, translateByCode('rules.address')));
            },
            trigger: 'change'
          }
          // validator.required(translateByCode('rules.address'), 'change')
        ]
        // remindTime: [
        //   // 提醒时间不能为空
        //   {
        //     required: true,
        //     message: '时间不能为空',
        //     trigger: 'blur'
        //   }
        //   // validator.required(translateByCode('rules.address'), 'change')
        // ]
      },
      remindTimeOption: { // 控制 结束提醒时间 不能小于当前时间
        disabledDate(date) {
          return date.getTime() <= Date.now();
        }
      },
      title: '',
      loading: false,
      submitLoading: false,
      dialogVisible: false,
      editionList: [],
      organizationUnitsTypes: [], // 组织架构列表
      cascaderKey: null, // 用于重置级联选择器
      type: '', // 弹框状态，是新增和是修改 new 是新增，edit是修改
      editId: '' // 编辑时候的id
    };
  },
  computed: {
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.$refs['SaasTenantCreateDto'].resetFields();
      }
    }
  },
  methods: {
    // 获取组织架构类型列表
    getOrganizationUnitsTypes() {
      return new Promise((resolve, reject) => {
        api_GET_OrganizationUnitsTypes().then(res => {
          this.organizationUnitsTypes = res.items || [];
          resolve(res.items);
        }, error => reject(error));
      });
    },
    // 地址栏改变
    changeAddressData() {
      this.SaasTenantCreateDto.province = this.SaasTenantCreateDto.addressData[0] || '';
      this.SaasTenantCreateDto.city = this.SaasTenantCreateDto.addressData[1] || '';
      this.SaasTenantCreateDto.county = this.SaasTenantCreateDto.addressData[2] || '';
    },
    // 根据用户id获取信息
    api_GET_TenantsId() {
      api_GET_TenantsId(this.editId).then(res => {
        CopyData(res, this.SaasTenantCreateDto);
        this.SaasTenantCreateDto.state = res.state;
        this.$set(this.SaasTenantCreateDto, 'addressData', [this.SaasTenantCreateDto.province, this.SaasTenantCreateDto.city, this.SaasTenantCreateDto.county]);
        this.loading = false;
      })
        .catch(() => {
        });
    },
    open(row) {
      this.dialogVisible = true;
      this.loading = true;
      this.type = row ? 'edit' : 'new';
      this.editId = row ? row.id : '';
      this.getOrganizationUnitsTypes();
      // 修改客户/添加客户  zh
      this.title = row ? translateByCode('tenant.editCustomer') : translateByCode('tenant.addCustomer');
      if (this.editId) {
        this.api_GET_TenantsId();
      } else {
        this.SaasTenantCreateDto = new SaasTenantCreateDto();
        this.$set(this.SaasTenantCreateDto, 'addressData', []);
        ++this.cascaderKey; // 级联选择器的重置
        this.loading = false;
      }
    },
    // 新增
    saveNew() {
      this.submitLoading = true;
      const returnData = new SaasTenantCreateDto();
      this.SaasTenantCreateDto.remindTime = this.SaasTenantCreateDto.remindTime ? FormatDate(this.SaasTenantCreateDto.remindTime, 'yyyy-MM-dd HH:mm:ss') : '';
      CopyData(this.SaasTenantCreateDto, returnData);
      this.$refs.SaasTenantCreateDto.validate(valid => {
        if (valid) {
          this.$emit('insert', returnData);
        } else {
          this.submitLoading = false;
          return false;
        }
      });
    },
    // 修改
    saveEdit() {
      this.submitLoading = true;
      const returnData = new SaasTenantCreateDto();
      this.SaasTenantCreateDto.remindTime = this.SaasTenantCreateDto.remindTime ? FormatDate(this.SaasTenantCreateDto.remindTime, 'yyyy-MM-dd HH:mm:ss') : '';
      CopyData(this.SaasTenantCreateDto, returnData);
      this.$refs.SaasTenantCreateDto.validate(valid => {
        if (valid) {
          this.$emit('update', returnData);
        } else {
          this.submitLoading = false;
          return false;
        }
      });
    }
  }
};
</script>
